<div class="main-container">
  <div class="row">
    <div fGrid="6">
      <p style="padding-left: 1rem;">
        {{'DEMO.DRAGGABLE.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-draggable</h3>
        <p>{{'COMPONENT.DRAGGABLE' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>dragItems</free-table-cell>
              <free-table-cell>
                <ng-template><code>Array</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dropTarget</free-table-cell>
              <free-table-cell>
                <ng-template><code>-</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>draggable</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dragEffect</free-table-cell>
              <free-table-cell>
                <ng-template><code>string</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <h3 class="free-head-title">{{'EVENT' | translate}}</h3>
      <div class="free-demo-row">
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onDragStart</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.EVENTS.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>onDragEnd</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DRAGGABLE.EVENTS.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>
    <div fGrid="6" class="free-demo-board">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;DraggableModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-draggable [dropTarget]="drop" [dragItems]="dragItem" (onDragEnd)="onDragEnd($event)">
                <ng-template let-item>
                  <free-list-item>
                    <free-avatar>
                      <free-image [src]="item.image"></free-image>
                    </free-avatar>
                    {{item.title}}
                  </free-list-item>
                </ng-template>
            </free-draggable>
            <div class="drop-box" #drop>
              <free-list-item *ngFor="let item of dropItem">
                <free-avatar>
                  <free-image [src]="item.image"></free-image>
                </free-avatar>
                {{item.title}}
              </free-list-item>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-draggable [dropTarget]="drop"  [dragItems]="dragItem" (onDragEnd)="onDragEnd($event)"&gt;
                &lt;ng-template let-item&gt;
                  &lt;free-list-item&gt;
                    &lt;free-avatar&gt;
                      &lt;free-image [src]="item["title"]"&gt;&lt;/free-image&gt;
                    &lt;/free-avatar&gt;
                      &#123;&#123;item?.title&#125;&#125;
                  &lt;/free-list-item&gt;
                &lt;/ng-template&gt;
              &lt;/free-draggable&gt;
              &lt;div class="drop-box" #drop&gt;
                &lt;free-list-item *ngFor="let item of dropItem"&gt;
                  &lt;free-avatar&gt;
                    &lt;free-image [src]="item.image"&gt;&lt;/free-image&gt;
                  &lt;/free-avatar&gt;
                  &#123;&#123;item?.title&#125;&#125;
                &lt;/free-list-item&gt;
              &lt;/div&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>

